import React, {Fragment} from 'react';
import { createModalContainer } from '@/components/changeModal';
import {Button, message, Form, Row, InputNumber, Input} from 'antd';
import { connect } from 'dva';
import modalstyles from './modal.less';
import styles from './index.less';

const FormItem = Form.Item;
const { TextArea } = Input;

@Form.create()
class ChangePointsComponent extends React.Component {
  constructor(props) {
      super(props);
      this.state = {
        isFetching: false,
        cardList: null
      }
  }
  componentWillMount() {
    window.Isoption = false;
  }
  componentDidMount() {
    window.Isoption = true;
  }

//取消
handleCancel =() => {
  this.props.cancel();
}


handleSubmit =(e) => {
    const { dispatch } = this.props;
    this.setState({
        isFetching: true
    })
    e.preventDefault();
    this.props.form.validateFields(async (err, values) => {
        if(!err) {
            dispatch({
                type:'customerList/ChangePoints',
                payload: {
                    MemberIds: [this.props.param.MemberId],
                    Point: values.Point,
                    Remark: values.Remark
                },
                callback: {
                    success: res => {
                        if(res.Code ===0) {
                            message.success('保存成功');
                            this.setState({
                                isFetching: false
                            }, () => {
                                this.props.ok();
                            })
                        }
                    },
                    error: res => {
                        console.log(res);
                        this.setState({
                            isFetching: false
                        });
                        message.error(res.Msg)
                    }
                }
            })
        } else {
            this.setState({
                isFetching: false
            })
        }
    })
}

    render() {
      const {getFieldDecorator} = this.props.form;
      const formItemLayout = {
        labelCol: {
            span: 6,
          },
          wrapperCol: {
            span: 16,
          },
      }
        return (
          <Form onSubmit={this.handleSubmit} style={{marginTop: 24}}>
            <Fragment>
                    <Row className={styles.ChangePoints}>
                        <FormItem {...formItemLayout} label="修改积分 (增减)"
                        extra="输入100，表示增加100，输入-100，表示减少100，只能输入整数,最大9999999"
                        >
                        {getFieldDecorator('Point', {
                            rules: [{ required: true, message: '请输入积分数值' }],
                        })(<InputNumber placeholder="请输入整数" max={9999999}/>)}
                        </FormItem>
                    </Row>
                    <Row>
                        <FormItem {...formItemLayout} label="描述">
                        {getFieldDecorator('Remark', {
                            rules: [{ required: false,message: '备注不为空,最多30个字符', min: 0, max: 30 }],
                        })(<TextArea  />)}
                        </FormItem>
                    </Row>
                </Fragment>

            <FormItem className={modalstyles.footBtn}>
                <Button onClick={this.handleCancel} style={{marginRight: 16}}>
                    取消
                </Button>
                <Button
                    type="primary"
                    htmlType="submit"
                    loading={this.state.isFetching}
                >
                    保存
                </Button>
            </FormItem>
      </Form>
        )
    }
}

const ChangePoints = createModalContainer(
    connect(({customerList, global, loading}) => ({
        memberInfo: customerList.memberInfo
    }))(ChangePointsComponent),
    true,
    true
);

export default ChangePoints;
